<template>
  <van-swipe :show-indicators="false" :loop="false">
    <van-swipe-item v-for="(item, index) in list">
      <van-cell
        center
        v-for="(itemIn, indexIn) in item.resources"
        :title="itemIn.resourceExtInfo.song.name"
        :label="itemIn.resourceExtInfo.artists[0].name"
        @click="handleSwiperItemClick(item, index, indexIn)"
      >
        <template #icon>
          <img :src="itemIn.resourceExtInfo.song.al.picUrl" alt="" />
        </template>
      </van-cell>
    </van-swipe-item>
  </van-swipe>
</template>

<script lang="ts" setup>
import {PropType} from 'vue';
import { useMyStores } from '@/store';
import { createSong } from '@/assets/js/song';

defineProps({
  // 数据列表
  list: {
    type: Array as PropType<any[]>,
    default: []
  }
});

const { playerStore } = useMyStores();

function handleSwiperItemClick(item: any, index: number, indexIn: number) {
  let cindex = 0;
  const song = createSong(item.resources[indexIn].resourceExtInfo.song);
  if (playerStore.currentPlayList.length == 0) {
    playerStore.SET_CURRENT_PLAY_LIST([song]);
    playerStore.SET_SEQUENCE_LIST([song]);
  } else {
    playerStore.ADD_TO_PLAY_LIST(createSong(song));
    cindex = playerStore.currentPlayList.findIndex(item => item.id == song.id);
  }
  playerStore.SET_FULL_PLAYER(true);
  playerStore.SET_MINI_PLAYER(false);
  // 改变播放索引
  playerStore.SET_CURRENT_PLAY_INDEX(cindex);
  // 改变播放状态
  playerStore.SET_AUDIO_PLAY_STATE(true);
}
</script>

<style lang="less" scoped>
.van-swipe {
  .van-cell {
    padding: 5px 5px 5px 0;
  }
  span {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    margin-right: 8px;
  }
  i {
    font-size: 23px;
  }
}
</style>
